<template>
	<div class="skeleton-view">
		<!--  -->
		<div class="skeleton-global skeleton-input"></div>
		<!--  -->
		<div class="skeleton-nav">
			<div v-for="item in 10">
				<p class="skeleton-global"></p>
				<p class="skeleton-global"></p>
			</div>
		</div>
		<!--  -->
		<div class="global-display">
			<div class="sk-left skeleton-global"></div>
			<div>
				<p class="sk-right skeleton-global" v-for="item in 4"></p>
			</div>
		</div>
		<!--  -->
		<div class="sk-travel global-display global-f-wrap">
			<p class="skeleton-global" v-for="item in 4"></p>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
.skeleton-input{
	height: 30px;
	border-radius: 40px !important;
}
.skeleton-nav{
	display: flex;
	flex-wrap: wrap;
	margin:20px 0;
}
.skeleton-nav div{
	width: calc(20% - 5px*2);
	margin: 5px;
}
.skeleton-nav p:nth-child(1){
	width: 50px;
	height: 50px;
	border-radius: 50px !important;
}
.skeleton-nav p:nth-child(2){
	width: 50px;
	height: 20px;
	margin-top: 10px;
}
.sk-left{
	flex: 1;
}
.sk-right{
	width: 100px;
	height: 40px;
	margin: 0 0 5px 5px;
	box-sizing: border-box;
}
.sk-right:last-child{
	margin-bottom: inherit;
}
.sk-travel{
	margin: 10px 0;
}
.sk-travel p{
	width: calc(50% - 5px*2);
	margin: 5px;
	height: 200px;
}
</style>